<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>zhuce</title>
	<link rel="stylesheet" type="text/css" href="css/luntanIndex.css">
	<link rel="stylesheet" type="text/css" href="css/xin_base.css">
	<link rel="stylesheet" type="text/css" href="css/imgUpload.css">
	<link rel="stylesheet" type="text/css" href="css/laydate.css">
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/cropbox.js"></script>
	<script type="text/javascript" src="js/laydate.js"></script>
</head>
<body>
	 <body>
	<!-- ······························头部结构····································· -->

	<div class="headerWrap">
	<!-- 顶部结构······················································ -->
		<div class="head clearfix">
			<div class="huanying">
				<p>天道酬勤，欢迎来到好琴声!</p>
			</div>
			<div class="h1">
				<a href="javascript:;">
					<h1>好琴声</h1>
				</a>
			</div>
			<div class="fanti">
				<a href="javascript:;">繁体</a>
			</div>
			<div class="erWeiMa">
				<div class="erWeiMaImg">
					<img src="images/foot_app.jpg" alt="">
				</div>
				<h2>扫一扫下载APP</h2>
			</div>
			<div class="denglu clearfix">
				<div class="dengLeft">
					<ul class="clearfix">
						<li><a href="javascript:;">个人中心</a></li>
						<li>丨</li>
						<li><a href="javascript:;">登录</a></li>
						<li>丨</li>
						<li><a href="javascript:;">注册</a></li>
					</ul>
				</div>
				<div class="dengRight">
					<a href="javascript:;">
						<img src="images/ad1.jpg" height="70" width="150" alt="">
					</a>
				</div>
			</div>
		</div>
	<!-- 顶部结构结束······················································ -->

	<!-- 导航结构···························································· -->
		<div class="navwrap">
			<div class="nav">
				<ul class="clearfix">
					<li><a href="javascript:;">音乐广场</a></li>
					<li><a href="javascript:;">音乐资讯</a></li>
					<li><a href="javascript:;">音乐名人</a></li>
					<li><a href="javascript:;">音乐老师</a></li>
					<li><a href="javascript:;">音乐教室</a></li>
					<li><a href="javascript:;">音乐乐团</a></li>
					<li><a href="javascript:;">音乐海选</a></li>
					<li><a href="javascript:;">音乐乐谱</a></li>
					<li><a href="javascript:;">音乐百科</a></li>
					<li><a href="javascript:;">音乐电台</a></li>
					<li><a href="javascript:;">声粉论坛</a></li>
					
				</ul>
			</div>
		</div>
	<!-- 导航结构···························································· -->
	</div>
<!-- 头部结构结束······························································ -->

<!-- ····························中间结构·································· -->
<div class="bodyWrap">
    
        <!--container-->

        <div class="xhuicontent">

            <div class="content w1200">

                <div class="xryzcTab">

                    <a href="putonghuiyuanzhuce.html">普通会员<i></i></a>

                    <a href="yinyuezhixingzhuce.html" class="on">音乐之星<i></i></a>

                    <a href="yinyuelaoshizhuce.html">音乐老师<i></i></a>

                    <a href="yinyuejiaoshizhuce.html">音乐教室</a>

                </div>

                <div class="xryzcbox">

                    <div class="box_l">

                        <form id="userRegist" >  


                            <table border="0" cellpadding="0" cellspacing="0">

                                <tbody><tr class="diyi">

                                    <th width="160"></th>

                                    <th width="230">填写账户信息，以下 <span>*</span> 信息均为必填：</th>

                                    <th></th>

                                </tr>

                                <tr>

                                    <td class="tit"><span>*</span> 昵称：</td>

                                    <td><input id="nickname" type="text" class="required txt" required></td>

                                    
                                </tr>


                               

                                </tr>



                                <tr>

                                    <td class="tit"><span>*</span> 手机号：</td>

                                    <td>
                                    	<select name="" id="choiceArea">
                                    		<option value="+86">+86</option>
                                    		<option value="00886">886</option>
                                    	</select>
			
                                    	<input id="reg_mobile"  type="text" class="required  txt" required></td>

                                </tr>



                                <tr>
                                    <td class="tit" style=" padding: 0px;"></td>
                                    <td style=" padding: 0px;">
                                        <p style=" margin: 0px; font-size: 12px; color: #959595">提示：海外手机请加当地国码,去除第一位的0,例如台湾：<span style=" color: red;font-weight: bold">886</span>935888999。</p>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="tit"><span>*</span> 头像照片</td>
                                    <td class="clearfix touxiangImg" >
                                        <div style=" float: left" id="imgShow"> 
                                            
                                        </div>
                                        <div id="shangchuan" style=" float: left; padding-top: 8px; padding-left: 10px;"> 
                                           点击上传头像
                                        </div>
                                        <!-- 头像上传插件······························ -->
											<div class="container">
											  <div class="imageBox">
											    <div class="thumbBox"></div>
											    <div class="spinner" style="display: none">Loading...</div>
											  </div>
											  <div class="action"> 
											    <!-- <input type="file" id="file" style=" width: 200px">-->
											    <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
											      <label for="upload-file">上传图像</label>
											      </a>
											      <input type="file" class="" name="upload-file" id="upload-file" />
											    </div>
											    <input type="button" id="btnCrop"  class="Btnsty_peyton" value="确定">
											    <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
											    <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
											  </div>
											</div>
											<script type="text/javascript">
											$(window).load(function() {
												var options =
												{
													thumbBox: '.thumbBox',
													spinner: '.spinner',
													imgSrc: 'images/avatar.png'
												}
												var cropper = $('.imageBox').cropbox(options);
												$('#upload-file').on('change', function(){
													var reader = new FileReader();
													reader.onload = function(e) {
														options.imgSrc = e.target.result;
														cropper = $('.imageBox').cropbox(options);
													}
													reader.readAsDataURL(this.files[0]);
													this.files = [];
												})
												$('#btnCrop').on('click', function(){
													var img = cropper.getDataURL();
													// $('.cropped').html('');
													
													$('#imgShow').append('<img src="'+img+'" align="absmiddle" style="width:180px;"><p>180px*180px</p>');
												})
												$('#btnZoomIn').on('click', function(){
													cropper.zoomIn();
												})
												$('#btnZoomOut').on('click', function(){
											        cropper.zoomOut();
											    })
											});
											$('#btnCrop').click(function(event) {
												$('.container').stop(true).fadeOut('normal');
											});
											$('#shangchuan').click(function(event) {
												$('.container').stop(true).fadeIn('normal');
											});
											</script>


                                        <!-- 头像上传插件······························ -->
                                    </td>
                                </tr>

                                <tr>
                                    <td class="tit"><span>*</span> 短信验证码：</td>
                                    <td>
                                        <div style=" float: left"> 
                                            <input type="hidden" id="reg_type" value="1">
                                            <input id="code" name="" type="text" class="required txts" aria-required="true"><input type="button" onclick="sendToRcode()" id="smobile" class="yzm" style=" border: 0px; cursor: pointer" value="获取验证码">
                                        </div>
                                        <div style=" float: left; padding-top: 8px; padding-left: 10px;"> 
                                            <label for="code" class="error" style=" display: none">  </label>
                                        </div>
                                    </td>
                                </tr>



                                <tr>
                                    <td class="tit"><span>*</span> 密码：</td>
                                    <td><input name="" type="password" id="password" class="txt"></td>
                                </tr>

                                <tr>

                                    <td class="tit"><span>*</span> 确认密码：</td>

                                    <td><input type="password" class="txt" name="data[password]" required="true" equalto="#password" aria-required="true"></td>

                                </tr>

                                <tr style=" display: none">

                                    <td class="tit"> 邮箱：</td>

                                    <td>

                                        <div class="lkinput"><input id="email" name="data[email]" type="text" class=" txt" placeholder="填写即可做为登陆名"></div>

                                        <div style=" float: left; padding-top: 8px; padding-left: 10px;"> 

                                            <label for="email" class="error" style=" display: none">  </label>

                                        </div>

                                    </td>

                                </tr>

                                <tr>

                                    <td class="tit"><span>*</span> 身份：</td>

                                    <td>

                                        <select name="data[cid]" class="sel">

                                            
                                                <option value="1">维修达人</option>

                                            
                                                <option value="2">钢琴之星</option>

                                            
                                                <option value="11">提琴之星</option>
                                                <option value="">吉他之星</option>
                                                <option value="">琴行之星</option>
                                                <option value="">管乐之星</option>
                                                <option value="">民乐之星</option>
                                                <option value="">歌唱之星</option>

                                            
                                        </select>

                                    </td>

                                </tr>

                                <tr>

                                    <td class="tit" valign="top"><span>*</span> 爱好的乐器：</td>

                                    <td class="yqxzBox pie" id="labelBox">
                                    	<select name="" id="">
                                    		<option value="">钢琴</option>
                                    		<option value="">提琴</option>
                                    		<option value="">吉他</option>
                                    		<option value="">管乐</option>
                                    		<option value="">打击乐</option>
                                    	</select>
                                    </td>

                                </tr>

                                <tr>

                                    <td class="tit"> &nbsp; &nbsp;性别：</td>

                                    <td>

                                        <select name="data[gender]" class="sel">

                                            <option value="男">男</option>

                                            <option value="女">女</option>

                                        </select>

                                    </td>

                                </tr>

                                <tr>

                                    <td class="tit">  &nbsp; &nbsp;出生日期：</td>

                                    <td>
		<!-- 日期插件························································ -->
                                        <div class="demo1">
					<input class="laydate-icon" id="demo" value="2014-6-25"> 
							</div>
							<script type="text/javascript">
							!function(){
								laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
								laydate({elem: '#demo'});//绑定元素
							}();

							//日期范围限制
							var start = {
							    elem: '#start',
							    format: 'YYYY-MM-DD',
							    min: laydate.now(), //设定最小日期为当前日期
							    max: '2099-06-16', //最大日期
							    istime: true,
							    istoday: false,
							    choose: function(datas){
							         end.min = datas; //开始日选好后，重置结束日的最小日期
							         end.start = datas //将结束日的初始值设定为开始日
							    }
							};

							var end = {
							    elem: '#end',
							    format: 'YYYY-MM-DD',
							    min: laydate.now(),
							    max: '2099-06-16',
							    istime: true,
							    istoday: false,
							    choose: function(datas){
							        start.max = datas; //结束日选好后，充值开始日的最大日期
							    }
							};
							laydate(start);
							laydate(end);

							//自定义日期格式
							laydate({
							    elem: '#test1',
							    format: 'YYYY年MM月DD日',
							    festival: true, //显示节日
							    choose: function(datas){ //选择日期完毕的回调
							        alert('得到：'+datas);
							    }
							});

							//日期范围限定在昨天到明天
							laydate({
							    elem: '#hello3',
							    min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
							    max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
							});
			  </script>
				<!-- 日期插件························································ -->
                                    </td>

                                </tr>

                                <tr>

                                    <td class="tit"><span>*</span> 城市：</td>

                                    <td colspan="2">
										<div class="info">
										<div>
										<select id="s_province" name="s_province"></select>  
									    <select id="s_city" name="s_city" ></select>  
									    <select id="s_county" name="s_county"></select>
									    <script class="resources library" src="js/area.js" type="text/javascript"></script>
									    
									    <script type="text/javascript">_init_area();</script>
									    </div>
									    <div id="show"></div>
									</div>
									<script type="text/javascript">
									var Gid  = document.getElementById ;
									var showArea = function(){
										Gid('show').innerHTML = "<h3>省" + Gid('s_province').value + " - 市" + 	
										Gid('s_city').value + " - 县/区" + 
										Gid('s_county').value + "</h3>"
																}
									Gid('s_county').setAttribute('onchange','showArea()');
									</script>
                                    </td>

                                </tr>

                                <tr>

                                    <td class="tit" valign="top">  &nbsp; &nbsp;自我介绍：</td>

                                    <td colspan="2"><textarea name="data[descr]" class="txtarea"></textarea></td>

                                </tr>

                                <tr>

                                    <td></td>

                                    <td colspan="2" class="ty">

                                        <input name="" id="acceptPro" type="checkbox" checked value="" class="fx" style="vertical-align: middle;">

                                        <label>我已经认真阅读

                                                                                                                                              >，
                                                                                                                                                                                        
                                            并完全同意所有条款。</label>

                                    </td>

                                </tr>

                                <tr>

                                    <td></td>

                                    <td colspan="2" class="btn"><input type="button"  value="注 册" class="zcbtn"></td>

                                </tr>

                            </tbody></table>

                        </form>

                    </div>

                   

                </div>

            </div>

        </div>

        <!--end-->



</div>




<!-- ····························中间结构结束·································· -->	
<!-- 底部结构开始································································ -->
	<div class="footerWrap">
		<div class="footBian">
			<div class="footNavWrap clearfix">
				<div class="footNav clearfix">
					<dl>
						<dd><a href="javascript:;">音乐广场</a></dd>
						<dt><a href="javascript:;">视频</a></dt>
						<dt><a href="javascript:;">图片</a></dt>
						<dt><a href="javascript:;">音乐</a></dt>
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐资讯</a></dd>
						<dt><a href="javascript:;">音乐新闻</a></dt>
						<dt><a href="javascript:;">音乐资讯</a></dt>
						<dt><a href="javascript:;">音乐活动</a></dt>
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐名人</a></dd>
						<dt><a href="javascript:;">名人名家</a></dt>
						<dt><a href="javascript:;">音乐之星</a></dt>
						
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐老师</a></dd>
						<dt><a href="javascript:;">键盘老师</a></dt>
						<dt><a href="javascript:;">吉他老师</a></dt>
						<dt><a href="javascript:;">弦乐老师</a></dt>
						<dt><a href="javascript:;">管乐老师</a></dt>
						<dt><a href="javascript:;">民乐老师</a></dt>
						<dt><a href="javascript:;">电声老师</a></dt>
						<dt><a href="javascript:;">民乐老师</a></dt>
						
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐教室</a></dd>
						<dt><a href="javascript:;">视频</a></dt>
						<dt><a href="javascript:;">图片</a></dt>
						<dt><a href="javascript:;">音乐</a></dt>
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐乐团</a></dd>
						<dt><a href="javascript:;">视频</a></dt>
						<dt><a href="javascript:;">图片</a></dt>
						<dt><a href="javascript:;">音乐</a></dt>
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐海选</a></dd>
						<dt><a href="javascript:;">视频</a></dt>
						<dt><a href="javascript:;">图片</a></dt>
						<dt><a href="javascript:;">音乐</a></dt>
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐乐谱</a></dd>
						<dt><a href="javascript:;">视频</a></dt>
						<dt><a href="javascript:;">图片</a></dt>
						<dt><a href="javascript:;">音乐</a></dt>
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐百科</a></dd>
						<dt><a href="javascript:;">视频</a></dt>
						<dt><a href="javascript:;">图片</a></dt>
						<dt><a href="javascript:;">音乐</a></dt>
					</dl>
					<dl>
						<dd><a href="javascript:;">音乐电台</a></dd>
						<dt><a href="javascript:;">视频</a></dt>
						<dt><a href="javascript:;">图片</a></dt>
						<dt><a href="javascript:;">音乐</a></dt>
					</dl>
					<dl>
						<dd><a href="javascript:;">声粉论坛</a></dd>
						
					</dl>
				</div>
				<div class="footCode clearfix">
					<div class="firstCode">
						<a href="javascript:;">
							<img src="images/foot_weixin.jpg" alt="">
							<h3>扫一扫关注微信</h3>
						</a>
					</div>
					<div class="secondCode">
						<a href="javascript:;">
							<img src="images/foot_app (1).jpg" alt="">
							<h3>扫一扫下载APP</h3>
						</a>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="footBtm clearfix">
				<div class="h1">
					<a href="javascript:;">
						<h1>好琴声</h1>
					</a>
				</div>
				<div class="lianxi">
					<div class="footTil">
						<span>好琴声</span>
						<i>0 2 1 - 6 7 7 0 3 9 5 6</i>
					</div>
					<div class="footcon">
						<p>Copyright © 2015 greattone.net All rights reserved. 好琴声版权所有</p>
						<p>沪ICP备09050100号</p>
						<p>公司总部地址：上海市金山区枫泾镇枫湾路531号科创小镇二楼 24小时服务热线：15216849061</p>
					</div>
				</div>
			</div>
		</div>
	</div>

<!-- 底部结构开始································································ -->




    



</body>
</body>
</html>